<template>
  <div class="customer-sales-ranking">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">客户销售排行</h1>
        <div class="date-filter">
          <a-range-picker
            v-model="dateRange"
            format="YYYY-MM-DD"
            :placeholder="['开始日期', '结束日期']"
            @change="handleDateRangeChange"
            :allowClear="true"
            style="width: 240px; margin-right: 12px;"
          />
          <a-button type="primary" @click="refreshData" :loading="loading">
            <a-icon type="reload" />
            刷新数据
          </a-button>
        </div>
      </div>
    </div>

    <div class="overview-cards" id="tour-overview">
      <div class="card-item" id="tour-total-customers">
        <div class="card-content">
          <div class="card-icon">
            <a-icon type="team" />
          </div>
          <div class="card-info">
            <a-tooltip placement="top">
              <template slot="title">
                总客户数表示在指定时间段内至少下过一次订单的不重复客户数量，是衡量业务客户覆盖面的重要指标。增长率显示与去年同期相比的变化幅度。
              </template>
              <div class="card-title">
                总客户数 <a-icon type="question-circle" style="color: #999; font-size: 12px" />
              </div>
            </a-tooltip>
            <div class="card-value">{{ overviewData.totalCustomers }}</div>
            <div class="card-trend">
              <span :class="['trend-text', overviewData.customerGrowthRate >= 0 ? 'positive' : 'negative']">
                <a-icon :type="overviewData.customerGrowthRate >= 0 ? 'arrow-up' : 'arrow-down'" />
                {{ Math.abs(overviewData.customerGrowthRate) }}%
              </span>
              <span class="trend-label">较上期</span>
            </div>
          </div>
        </div>
      </div>

      <div class="card-item" id="tour-active-customers">
        <div class="card-content">
          <div class="card-icon active">
            <a-icon type="dollar" />
          </div>
          <div class="card-info">
            <a-tooltip placement="top">
              <template slot="title">
                活跃客户数指最近30天内有下单行为的客户数量，反映当前客户的活跃程度和参与度。这个指标有助于评估客户忠诚度和业务健康度。
              </template>
              <div class="card-title">
                活跃客户数 <a-icon type="question-circle" style="color: #999; font-size: 12px" />
              </div>
            </a-tooltip>
            <div class="card-value">{{ overviewData.activeCustomers }}</div>
            <div class="card-trend">
              <span :class="['trend-text', overviewData.activeGrowthRate >= 0 ? 'positive' : 'negative']">
                <a-icon :type="overviewData.activeGrowthRate >= 0 ? 'arrow-up' : 'arrow-down'" />
                {{ Math.abs(overviewData.activeGrowthRate) }}%
              </span>
              <span class="trend-label">较上期</span>
            </div>
          </div>
        </div>
      </div>

      <div class="card-item" id="tour-new-customers">
        <div class="card-content">
          <div class="card-icon new">
            <a-icon type="user-add" />
          </div>
          <div class="card-info">
            <a-tooltip placement="top">
              <template slot="title">
                新增客户数表示在选定时间段内首次在系统中下单的客户数量，是衡量业务拓展能力和市场渗透率的关键指标。
              </template>
              <div class="card-title">
                新增客户 <a-icon type="question-circle" style="color: #999; font-size: 12px" />
              </div>
            </a-tooltip>
            <div class="card-value">{{ overviewData.newCustomers }}</div>
            <div class="card-trend">
              <span :class="['trend-text', overviewData.newGrowthRate >= 0 ? 'positive' : 'negative']">
                <a-icon :type="overviewData.newGrowthRate >= 0 ? 'arrow-up' : 'arrow-down'" />
                {{ Math.abs(overviewData.newGrowthRate) }}%
              </span>
              <span class="trend-label">较上期</span>
            </div>
          </div>
        </div>
      </div>

      <div class="card-item" id="tour-avg-amount">
        <div class="card-content">
          <div class="card-icon avg">
            <a-icon type="calculator" />
          </div>
          <div class="card-info">
            <a-tooltip placement="top">
              <template slot="title">
                客单价（平均订单金额）反映了客户的消费能力和订单价值水平，是评估客户质量和业务盈利能力的重要指标。数值越高表示客户消费水平越高。
              </template>
              <div class="card-title">
                客单价 <a-icon type="question-circle" style="color: #999; font-size: 12px" />
              </div>
            </a-tooltip>
            <div class="card-value">¥{{ overviewData.avgOrderAmount }}</div>
            <div class="card-trend">
              <span :class="['trend-text', overviewData.avgAmountGrowthRate >= 0 ? 'positive' : 'negative']">
                <a-icon :type="overviewData.avgAmountGrowthRate >= 0 ? 'arrow-up' : 'arrow-down'" />
                {{ Math.abs(overviewData.avgAmountGrowthRate) }}%
              </span>
              <span class="trend-label">较上期</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="ranking-section">
        <div class="ranking-card" id="tour-sales-ranking">
          <div class="card-header">
            <a-tooltip placement="top">
              <template slot="title">
                销售金额排行榜按客户的总销售金额从高到低排序，显示贡献最大的客户。每个客户显示销售金额、订单数量、占比和增长率，帮助识别和维护核心客户。
              </template>
              <h3 class="card-title">
                客户销售金额排行榜 (TOP 10)
                <a-icon type="question-circle" style="color: #999; font-size: 14px; margin-left: 8px" />
              </h3>
            </a-tooltip>
          </div>
          <div class="ranking-list">
            <div
              v-for="(item, index) in salesRankingData"
              :key="item.customerId"
              class="ranking-item"
              :class="{ 'top-three': index < 3 }"
            >
              <div class="ranking-number">
                <span v-if="index < 3" class="medal" :class="`medal-${index + 1}`">{{ index + 1 }}</span>
                <span v-else class="number">{{ index + 1 }}</span>
              </div>
              <div class="customer-info">
                <div class="customer-name">{{ item.customerName }}</div>
                <div class="customer-type">{{ item.customerType }}</div>
              </div>
              <div class="sales-amount">
                <div class="amount">¥{{ item.salesAmount }}</div>
                <div class="growth-rate" :class="item.growthRate >= 0 ? 'positive' : 'negative'">
                  <a-icon :type="item.growthRate >= 0 ? 'arrow-up' : 'arrow-down'" />
                  {{ Math.abs(item.growthRate) }}%
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="ranking-card" id="tour-order-ranking">
          <div class="card-header">
            <a-tooltip placement="top">
              <template slot="title">
                订单数量排行榜按客户的订单数量从多到少排序，反映客户的购买频次和忠诚度。高频次客户通常具有较强的粘性和稳定的合作关系。
              </template>
              <h3 class="card-title">
                客户订单数量排行榜 (TOP 10)
                <a-icon type="question-circle" style="color: #999; font-size: 14px; margin-left: 8px" />
              </h3>
            </a-tooltip>
          </div>
          <div class="ranking-list">
            <div
              v-for="(item, index) in orderRankingData"
              :key="item.customerId"
              class="ranking-item"
              :class="{ 'top-three': index < 3 }"
            >
              <div class="ranking-number">
                <span v-if="index < 3" class="medal" :class="`medal-${index + 1}`">{{ index + 1 }}</span>
                <span v-else class="number">{{ index + 1 }}</span>
              </div>
              <div class="customer-info">
                <div class="customer-name">{{ item.customerName }}</div>
                <div class="customer-type">{{ item.customerType }}</div>
              </div>
              <div class="order-count">
                <div class="count">{{ item.orderCount }}单</div>
                <div class="growth-rate" :class="item.growthRate >= 0 ? 'positive' : 'negative'">
                  <a-icon :type="item.growthRate >= 0 ? 'arrow-up' : 'arrow-down'" />
                  {{ Math.abs(item.growthRate) }}%
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="analysis-section">
        <div class="analysis-card" id="tour-contribution">
          <div class="card-header">
            <a-tooltip placement="top">
              <template slot="title">
                客户贡献度分析通过饼图直观展示TOP
                10客户与其他客户的贡献占比。可切换查看销售额贡献或订单数贡献，帮助了解客户结构和业务集中度。
              </template>
              <h3 class="card-title">
                客户贡献度分析 <a-icon type="question-circle" style="color: #999; font-size: 14px; margin-left: 8px" />
              </h3>
            </a-tooltip>
            <a-select v-model="contributionType" style="width: 120px" @change="onContributionTypeChange">
              <a-select-option value="sales">按销售额</a-select-option>
              <a-select-option value="orders">按订单数</a-select-option>
            </a-select>
          </div>
          <div class="chart-container">
            <div ref="contributionChart" class="chart"></div>
          </div>
        </div>

        <div class="analysis-card" id="tour-customer-analysis">
          <div class="card-header">
            <a-tooltip placement="top">
              <template slot="title">
                新老客户占比分析展示新客户与老客户的比例关系。可按客户数量或销售额两个维度查看，帮助了解客户结构变化和业务发展趋势。
                <br /><br />
                <strong>客户定义：</strong><br />
                • 新客户：首次下单日期 >= 查询开始日期的客户<br />
                • 老客户：首次下单日期 < 查询开始日期的客户
              </template>
              <h3 class="card-title">
                新老客户占比分析
                <a-icon type="question-circle" style="color: #999; font-size: 14px; margin-left: 8px" />
              </h3>
            </a-tooltip>
            <a-radio-group v-model="customerAnalysisType" @change="onCustomerAnalysisTypeChange">
              <a-radio-button value="count">按数量</a-radio-button>
              <a-radio-button value="sales">按销售额</a-radio-button>
            </a-radio-group>
          </div>
          <div class="chart-container">
            <div ref="customerChart" class="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment'
import {
  getCustomerOverview,
  getCustomerSalesRanking,
  getCustomerOrderRanking,
  getCustomerContribution,
  getCustomerAnalysis,
} from '@/api/oms/statistics'

export default {
  name: 'CustomerSalesRanking',
  data() {
    return {
      loading: false,
      dateRange: [moment().subtract(30, 'days'), moment()],
      contributionType: 'sales',
      customerAnalysisType: 'count',
      overviewData: {
        totalCustomers: 0,
        customerGrowthRate: 0,
        activeCustomers: 0,
        activeGrowthRate: 0,
        newCustomers: 0,
        newGrowthRate: 0,
        avgOrderAmount: 0,
        avgAmountGrowthRate: 0,
      },
      salesRankingData: [],
      orderRankingData: [],
      contributionData: null,
      customerAnalysisData: null,
      contributionChartInstance: null,
      customerChartInstance: null,
    }
  },
  mounted() {
    this.initCharts()
    this.loadData()
  },
  beforeDestroy() {
    if (this.contributionChartInstance) this.contributionChartInstance.dispose()
    if (this.customerChartInstance) this.customerChartInstance.dispose()
  },
  methods: {
    initCharts() {
      this.$nextTick(() => {
        if (this.$refs.contributionChart) this.contributionChartInstance = echarts.init(this.$refs.contributionChart)
        if (this.$refs.customerChart) this.customerChartInstance = echarts.init(this.$refs.customerChart)
        window.addEventListener('resize', this.handleResize)
      })
    },
    handleResize() {
      if (this.contributionChartInstance) this.contributionChartInstance.resize()
      if (this.customerChartInstance) this.customerChartInstance.resize()
    },
    async loadData() {
      this.loading = true
      try {
        await Promise.all([
          this.loadOverviewData(),
          this.loadSalesRankingData(),
          this.loadOrderRankingData(),
          this.loadContributionData(),
          this.loadCustomerAnalysisData(),
        ])
      } catch (error) {
        this.$message.error('数据加载失败：' + error.message)
      } finally {
        this.loading = false
      }
    },
    async loadOverviewData() {
      try {
        const params = {
          startDate: this.dateRange[0].format('YYYY-MM-DD'),
          endDate: this.dateRange[1].format('YYYY-MM-DD'),
        }
        const response = await getCustomerOverview(params)
        if (response.success) this.overviewData = response.result
      } catch (error) {
        console.error('加载概览数据失败:', error)
        this.$message.error('加载概览数据失败：' + error.message)
      }
    },
    async loadSalesRankingData() {
      try {
        const params = {
          startDate: this.dateRange[0].format('YYYY-MM-DD'),
          endDate: this.dateRange[1].format('YYYY-MM-DD'),
          limit: 10,
        }
        const response = await getCustomerSalesRanking(params)
        if (response.success) this.salesRankingData = response.result
      } catch (error) {
        console.error('加载销售排行数据失败:', error)
        this.$message.error('加载销售排行数据失败：' + error.message)
      }
    },
    async loadOrderRankingData() {
      try {
        const params = {
          startDate: this.dateRange[0].format('YYYY-MM-DD'),
          endDate: this.dateRange[1].format('YYYY-MM-DD'),
          limit: 10,
        }
        const response = await getCustomerOrderRanking(params)
        if (response.success) this.orderRankingData = response.result
      } catch (error) {
        console.error('加载订单排行数据失败:', error)
        this.$message.error('加载订单排行数据失败：' + error.message)
      }
    },
    async loadContributionData() {
      try {
        const params = {
          startDate: this.dateRange[0].format('YYYY-MM-DD'),
          endDate: this.dateRange[1].format('YYYY-MM-DD'),
          type: this.contributionType,
        }
        const response = await getCustomerContribution(params)
        if (response.success) this.contributionData = response.result
      } catch (error) {
        console.error('加载贡献度数据失败:', error)
      }
      this.updateContributionChart()
    },
    async loadCustomerAnalysisData() {
      try {
        const params = {
          startDate: this.dateRange[0].format('YYYY-MM-DD'),
          endDate: this.dateRange[1].format('YYYY-MM-DD'),
          type: this.customerAnalysisType,
        }
        const response = await getCustomerAnalysis(params)
        if (response.success) this.customerAnalysisData = response.result
      } catch (error) {
        console.error('加载客户分析数据失败:', error)
      }
      this.updateCustomerChart()
    },
    updateContributionChart() {
      if (!this.contributionChartInstance) return

      // 使用真实数据或默认数据
      let top10Value = 0
      let othersValue = 0
      let top10Percentage = 0
      let othersPercentage = 0

      if (this.contributionData) {
        if (this.contributionType === 'sales') {
          top10Value = this.contributionData.top10Amount || 0
          othersValue = this.contributionData.othersAmount || 0
          top10Percentage = this.contributionData.top10Percentage || 0
          othersPercentage = this.contributionData.othersPercentage || 0
        } else {
          top10Value = this.contributionData.top10Orders || 0
          othersValue = this.contributionData.othersOrders || 0
          top10Percentage = this.contributionData.top10Percentage || 0
          othersPercentage = this.contributionData.othersPercentage || 0
        }
      } else {
        // 无数据时显示空图表
        top10Percentage = 0
        othersPercentage = 0
      }

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: this.contributionType === 'sales' ? '{b}: ¥{c} ({d}%)' : '{b}: {c}单 ({d}%)',
        },
        legend: { orient: 'vertical', left: 10, data: ['TOP 10客户', '其他客户'] },
        series: [
          {
            name: this.contributionType === 'sales' ? '销售额贡献' : '订单数贡献',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['60%', '50%'],
            data: [
              {
                value: this.contributionType === 'sales' ? top10Value : top10Value,
                name: 'TOP 10客户',
                itemStyle: { color: '#3B82F6' },
              },
              {
                value: this.contributionType === 'sales' ? othersValue : othersValue,
                name: '其他客户',
                itemStyle: { color: '#E5E7EB' },
              },
            ],
          },
        ],
      }
      this.contributionChartInstance.setOption(option)
    },
    updateCustomerChart() {
      if (!this.customerChartInstance) return

      // 使用真实数据或默认数据
      let newValue = 0
      let oldValue = 0

      if (this.customerAnalysisData) {
        if (this.customerAnalysisType === 'count') {
          newValue = this.customerAnalysisData.newCustomerCount || 0
          oldValue = this.customerAnalysisData.oldCustomerCount || 0
        } else {
          newValue = this.customerAnalysisData.newCustomerAmount || 0
          oldValue = this.customerAnalysisData.oldCustomerAmount || 0
        }
      } else {
        // 无数据时显示空图表
        newValue = 0
        oldValue = 0
      }

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: this.customerAnalysisType === 'count' ? '{b}: {c}个 ({d}%)' : '{b}: ¥{c} ({d}%)',
        },
        legend: { orient: 'vertical', left: 10, data: ['新客户', '老客户'] },
        series: [
          {
            name: this.customerAnalysisType === 'count' ? '客户数量' : '销售额',
            type: 'pie',
            radius: '70%',
            center: ['60%', '50%'],
            data: [
              { value: newValue, name: '新客户', itemStyle: { color: '#67C23A' } },
              { value: oldValue, name: '老客户', itemStyle: { color: '#409EFF' } },
            ],
          },
        ],
      }
      this.customerChartInstance.setOption(option)
    },
    handleDateRangeChange(dates) {
      this.dateRange = dates
      this.loadData()
    },
    refreshData() {
      this.loadData()
    },
    onContributionTypeChange() {
      this.loadContributionData()
    },
    onCustomerAnalysisTypeChange() {
      this.loadCustomerAnalysisData()
    },
  },
}
</script>

<style lang="less" scoped>
.customer-sales-ranking {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .page-title {
        font-size: 28px;
        font-weight: 600;
        color: #ffffff;
        margin: 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .date-filter {
        display: flex;
        align-items: center;
        gap: 12px;

        .ant-btn-primary {
          background: rgba(255, 255, 255, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.3);
          border-radius: 8px;
          font-weight: 500;
          backdrop-filter: blur(10px);
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-1px);
          }
        }

        .ant-calendar-picker {
          .ant-calendar-picker-input {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            backdrop-filter: blur(10px);

            &:hover {
              border-color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }
  .header-actions {
    display: flex;
    align-items: center;
  }
  .page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #303133;
  }
  .overview-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  .card-item {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
  }
  .card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }
  .card-content {
    display: flex;
    align-items: center;
  }
  .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    background: #e3f2fd;
    color: #1976d2;
  }
  .card-icon.active {
    background: #e8f5e8;
    color: #388e3c;
  }
  .card-icon.new {
    background: #fff3e0;
    color: #f57c00;
  }
  .card-icon.avg {
    background: #f3e5f5;
    color: #7b1fa2;
  }
  .card-icon .anticon {
    font-size: 24px;
  }
  .card-info {
    flex: 1;
  }
  .card-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 8px;
  }
  .card-value {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
  }
  .card-trend {
    display: flex;
    align-items: center;
    font-size: 12px;
  }
  .trend-text {
    margin-right: 8px;
  }
  .trend-text.positive {
    color: #67c23a;
  }
  .trend-text.negative {
    color: #f56c6c;
  }
  .trend-label {
    color: #909399;
  }
  .main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    height: calc(100vh - 200px);
  }
  .ranking-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
  }
  .ranking-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: calc(50% - 12px);
    display: flex;
    flex-direction: column;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-shrink: 0;
  }
  .card-header .card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
  .ranking-list {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100% - 60px);
    padding-right: 8px;
  }
  .ranking-list::-webkit-scrollbar {
    width: 6px;
  }
  .ranking-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  .ranking-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  .ranking-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  .ranking-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
  }
  .ranking-item:last-child {
    border-bottom: none;
  }
  .ranking-item:hover {
    background: #f8f9fa;
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .ranking-number {
    width: 40px;
    display: flex;
    justify-content: center;
    margin-right: 16px;
  }
  .medal {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    font-weight: bold;
  }
  .medal-1 {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
  }
  .medal-2 {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  }
  .medal-3 {
    background: linear-gradient(135deg, #cd7f32, #daa520);
  }
  .number {
    font-size: 16px;
    font-weight: 600;
    color: #606266;
  }
  .customer-info {
    flex: 1;
    margin-right: 16px;
  }
  .customer-name {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 4px;
  }
  .customer-type {
    font-size: 12px;
    color: #909399;
  }
  .sales-amount,
  .order-count {
    text-align: right;
  }
  .amount,
  .count {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
  }
  .growth-rate {
    font-size: 12px;
  }
  .growth-rate.positive {
    color: #67c23a;
  }
  .growth-rate.negative {
    color: #f56c6c;
  }
  .analysis-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
  }
  .analysis-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: calc(50% - 12px);
    display: flex;
    flex-direction: column;
  }
  .chart-container {
    flex: 1;
    min-height: 0;
  }
  .chart-container .chart {
    width: 100%;
    height: 100%;
    min-height: 200px;
  }
}
@media (max-width: 1200px) {
  .customer-sales-ranking .overview-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .customer-sales-ranking .main-content {
    grid-template-columns: 1fr;
    height: auto;
  }
  .customer-sales-ranking .ranking-section,
  .customer-sales-ranking .analysis-section {
    height: auto;
  }
  .customer-sales-ranking .ranking-card,
  .customer-sales-ranking .analysis-card {
    height: auto;
    min-height: 400px;
  }
  .customer-sales-ranking .ranking-list {
    max-height: 300px;
  }
  .customer-sales-ranking .chart-container .chart {
    height: 300px;
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  .customer-sales-ranking {
    padding: 16px;
  }
  .customer-sales-ranking .overview-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .customer-sales-ranking .main-content {
    gap: 16px;
  }
  .customer-sales-ranking .ranking-card,
  .customer-sales-ranking .analysis-card {
    padding: 16px;
    min-height: 350px;
  }
  .customer-sales-ranking .ranking-list {
    max-height: 250px;
  }
  .customer-sales-ranking .chart-container .chart {
    height: 250px;
    min-height: 250px;
  }
}

/* 页面缩放适配 */
@media (min-width: 1920px) {
  .customer-sales-ranking .main-content {
    height: calc(100vh - 180px);
  }
}

@media (max-height: 800px) {
  .customer-sales-ranking .main-content {
    height: calc(100vh - 160px);
  }
  .customer-sales-ranking .ranking-list {
    max-height: calc(100% - 50px);
  }
}
</style>
